<template>
  <!-- 评论管理 -->
  <div class="comment">
    <div
      style="
        background: white;
        padding: 15px;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        border-radius: 5px;
      "
    >
      <div class="time-box">
        <div>
          <span class="time">时间选择:</span>
          <el-button-group>
            <el-button size="small">全部</el-button>
            <el-button size="small">今天</el-button>
            <el-button size="small">昨天</el-button>
            <el-button size="small">最近7天</el-button>
            <el-button size="small">最近30天</el-button>
            <el-button size="small">本月</el-button>
            <el-button size="small">本年</el-button>
          </el-button-group>
          <span class="time"> 起始时间-截止时间 </span>
        </div>
        <div class="search">
          <div>
            <div>用户名称：</div>
            <el-input
              placeholder="请输入用户名称"
              v-model="data.input1"
              size="small"
            >
              <template #append
                ><el-button icon="el-icon-search"></el-button
              ></template>
            </el-input>
          </div>
          <div>
            <div>关键字搜索：</div>
            <el-input
              placeholder="请输入商品ID或者商品信息"
              v-model="data.input2"
              size="small"
            >
              <template #append
                ><el-button icon="el-icon-search"></el-button
              ></template>
            </el-input>
          </div>
          <div>
            <div>评价状态：</div>
            <el-input
              placeholder="请输入内容"
              v-model="data.input3"
              size="small"
            >
              <template #append
                ><el-button icon="el-icon-search"></el-button
              ></template>
            </el-input>
          </div>
        </div>
        <div>
          <el-button type="primary" size="small">批量通过</el-button>
          <el-button type="primary" size="small">批量删除</el-button>
        </div>
      </div>
      <div class="table-box">
        <zyj-table
          :is_selete='true'
          :operation="data.operation"
          :handleClick="handleClick"
          :tableData="data.tableData"
          :titleData="data.titleData"
          :is_expand="data.is_expand"
          :is_check="data.is_check"
          :onChange="onChange"
        ></zyj-table>
        <zyj-pagination
          :tableData="data.tableData"
          :handleSizeChange="handleSizeChange"
          :handleCurrentChange="handleCurrentChange"
          :currentPage4="data.currentPage4"
        ></zyj-pagination>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref ,onMounted} from "vue";
import ZyjTable from "@/components/zyj/ZyjTable.vue";
import ZyjPagination from "@/components/zyj/ZyjPagination.vue";
import { ElMessageBox } from 'element-plus';
  import { ElMessage } from 'element-plus';

export default defineComponent({
  name: "GoodsComment",
  components: {
    ZyjTable,
    ZyjPagination,
  },
  setup() {
    const data = reactive({
      dialogTableVisible:false,
      is_expand: "",
      is_check: true,
      input1: "",
      input2: "",
      input3: "",
      operation: ["通过","拒绝","删除"],
      titleData: [
        { label: "商品图", prop: "avatar", type: "image", width: "100" },
        { label: "商品名称", prop: "shop_name" },
        { label: "用户名称", prop: "username" },
        { label: "是否显示", prop: "check", type: "check" },
        { label: "产品评分", prop: "shop_score", type: "score", width: "180" },
        { label: "评价内容", prop: "comment_content" },
        { label: "回复内容", prop: "comment_reply", width: "" },
        { label: "评价时间", prop: "crete_time" },
      ],
      tableData: [
        {
          avatar:'',
          shop_name:'可乐',
          username:'玛卡巴卡',
          check:true,
          shop_score:5,
          comment_content:'玛卡巴卡的可乐真好喝',
          comment_reply:'好喝你就多喝点',
          crete_time:'2021-08-25'
        },
        {
          avatar:'',
          shop_name:'雪碧',
          username:'依古比古',
          check:true,
          shop_score:2,
          comment_content:'依古比古的雪碧真好喝',
          comment_reply:'好喝你就多喝点',
          crete_time:'2021-08-25'
        },
      ],
    });
    // 操作栏按钮
    const handleClick = (item: String, row: Object) => {
      console.log(item, row);
      if(item==='删除'){
        ElMessage({
            showClose: true,
            message: '访问权限不足',
            type: 'error'
          });
      }else if(item==='通过'){
        ElMessage({
            showClose: true,
            message: '操作成功,已通过',
            type: 'success'
          });
      }else if(item==='拒绝'){
        ElMessage({
            showClose: true,
            message: '操作成功，已拒绝',
            type: 'success'
          });
      }
    };
    // 分页器
    const handleSizeChange = (val: any) => {
      console.log(`每页 ${val} 条`);
    };
    const handleCurrentChange = (val: any) => {
      console.log(`当前页: ${val}`);
    };

    // 是否显示
    const onChange = (e: any) => {
      console.log(e);
    };

   

    return {
      data,
      handleClick,
      currentPage4: ref(1),
      handleSizeChange,
      handleCurrentChange,
      onChange,
    };
  },
});
</script>

<style scoped>
.pagination {
  text-align: right;
  margin-top: 20px;
}
.search {
  display: flex;
  margin-bottom: 20px;
}
.search > div {
  color: #333;
  margin: 20px 20px 0 0;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.time-box {
  padding-bottom: 25px;
  border-bottom: 1px solid #e6ebf5;
}
.table-box {
  width: 100%;
  background: white;
}
.time {
  font-size: 14px;
  font-weight: 600;
  margin-right: 20px;
}
.submit{
  text-align: right;
}
</style>
